<template>
  <Content title="工单调整详情">
    <view class="device-details">
      <view class="content">
        <view class="top-box">
          <view class="info-box">
            <view class="text-box">
              <text class="label">设备编号:</text>
              <text class="value">{{ model.deviceNo }}</text>
            </view>
            <view class="text-box">
              <text class="label">设备品牌:</text>
              <text class="value">{{ model.brand }}</text>
            </view>
            <view class="text-box">
              <text class="label">设备型号:</text>
              <text class="value">{{ model.deviceSpec }}</text>
            </view>
          </view>
        </view>
        <view class="main-box">
          <template v-if="data && data.length > 0">
            <scroll-view
              class="home-list"
              scroll-y
              @scrolltolower="scrollBottom"
              :refresher-triggered="triggered"
              :refresher-threshold="100"
              @refresherrestore="onRestore"
              refresher-enabled
              @refresherrefresh="onRefresh"
              :ower-threshold="0"
            >
              <u-radio-group placement="column" v-model="radioGroup">
                <view
                  class="info-box"
                  v-for="(item, index) in data"
                  :key="item.id"
                >
                  <view class="title">
                    <view class="radio">
                      <u-radio :name="index"></u-radio>
                    </view>
                    <text class="txt u-line-1">工单号 {{ item.workCode }}</text>
                    <view class="tag-box">
                      <u-tag
                        shape="circle"
                        :text="item.state"
                        :borderColor="getColor(item.state)"
                        :bgColor="getColor(item.state)"
                      ></u-tag>
                      <!-- <uni-icons type="right" size="14" /> -->
                    </view>
                  </view>
                  <view class="text-box">
                    <text class="label">产品编号:</text>
                    <text class="value">{{ item.materialCode }}</text>
                  </view>
                  <view class="text-box">
                    <text class="label">工单组号:</text>
                    <text class="value">{{ item.groupItem }}</text>
                  </view>
                  <view class="text-box">
                    <text class="label">产品名称:</text>
                    <text class="value">{{ item.materialName }}</text>
                  </view>
                  <view class="text-box">
                    <text class="label">产品型号:</text>
                    <text class="value">{{ item.materialModel }}</text>
                  </view>
                  <view class="text-box">
                    <text class="label">模具编号:</text>
                    <text class="value">{{ item.moldCode }}</text>
                  </view>
                  <view class="text-box">
                    <!-- 缺少 -->
                    <text class="label">模具名称:</text>
                    <text class="value">{{ item.moldName }}</text>
                  </view>
                  <view class="text-box">
                    <text class="label">计划数量:</text>
                    <text class="value">{{ item.planProduceQuantity }}</text>
                  </view>
                  <view class="text-box">
                    <text class="label">生产数量:</text>
                    <text class="value">{{ item.produceQuantity }}</text>
                  </view>
                  <view class="text-box">
                    <text class="label">计划开始时间:</text>
                    <text class="value">{{ item.workStartTime }}</text>
                  </view>

                  <view class="btn-box">
                    <view
                      class="btn-box-item"
                      @click.stop="changeCavities(item)"
                      >改变腔数</view
                    >
                    <view
                      class="btn-box-item"
                      @click.stop="toPath('replace', item)"
                      >更换模具</view
                    >
                    <view
                      class="btn-box-item"
                      @click.stop="toPath('transfer', item)"
                      >转移机台</view
                    >
                  </view>

                  <view class="btn-v">
                    <view class="but-box">
                      <u-button
                        class="btn"
                        type="primary"
                        @click="reSortWorkOrder"
                        text="调整工单顺序"
                      ></u-button>
                    </view>
                  </view>
                </view>
              </u-radio-group>

              <view class="loading animation-scale-up" v-if="loading"></view>
              <view class="scroll-no-data" v-if="noData">已拉到最底部</view>
            </scroll-view>
          </template>
          <template v-else>
            <view class="info-box">
              <Empty />
            </view>
          </template>
        </view>
      </view>

      <MyModal
        v-model="show"
        :title="modalTitle"
        @confirm="confirm"
        ref="uModal"
        :showCancelButton="true"
        @cancel="cancelModal"
      >
        <view class="number-davities-box">
          <view class="header"> 调整实际使用型腔数 </view>
          <view class="box-content">
            <view class="item-box">
              <text class="label">标准</text>
              <text class="value">{{ obj.standardCavityNum }}</text>
            </view>
            <view class="item-box">
              <text class="label">实际</text>
              <text class="value">
                <u-input type="number" v-model="realityCavityNum"></u-input>
              </text>
            </view>
          </view>
        </view>
      </MyModal>
    </view>
  </Content>
</template>

<script>
import MyModal from "@/components/myModal";
import Content from "@/components/content/index";
import fetch from "@/utils/fetch";
import Empty from "@/components/empty";
import { setPageData, getPageData } from "@/store/user";
import { listMixins } from "@/mixins/list";
export default {
  mixins: [listMixins],
  components: {
    Content,
    Empty,
    MyModal,
  },
  data() {
    return {
      model: {},
      modalTitle: "",
      radioGroup: "",
      obj: "", //点击数据
      realityCavityNum: "",
      show: false,
      listUrl: "/dms/mobile/selectWorkByDeviceId",
      search: {
        deviceId: "",
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.model = getPageData();
    this.search.deviceId = option.id;
  },
  computed: {},
  mounted() {},
  methods: {
    confirm(next) {
      const that = this;
      if (!that.realityCavityNum) {
        uni.$emit("openToast", {
          type: "error",
          icon: "error",
          title: "请输入实际使用型腔数!",
        });
        return;
      }
      const data = that.obj;
      fetch("PUT", "/dms/mobile/replaceCavities", null, {
        moldCode: data.moldCode,
        materialCode: data.materialCode,
        realityCavityNum: that.realityCavityNum,
      }).then((res) => {
        next();
        uni.$emit("openToast", {
          type: "success",
          title: res.msg,
          complete() {
            that.show = false;
            that.getList();
          },
        });
      });
    },
    changeCavities(data) {
      const that = this;
      fetch("get", "/dms/mobile/selectCavities", null, {
        moldCode: data.moldCode,
        materialCode: data.materialCode,
      }).then((res) => {
        that.show = true;
        that.obj = { ...data, standardCavityNum: res.data.standardCavityNum };
        that.realityCavityNum = data.realityCavityNum;
      });
    },
    cancelModal() {
      this.show = false;
    },
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    toPath(url, item) {
      setPageData(item);
      uni.navigateTo({
        url: `/pages/staging/work-order-adjustment/${url}`,
        animationType: "pop-in",
      });
    },
    reSortWorkOrder() {
      const that = this;
      if (!that.radioGroup && that.radioGroup !== 0) {
        uni.$emit("openToast", {
          type: "error",
          icon: "error",
          title: "请选中一条数据!",
        });
        return;
      }
      that.$loading.open();
      const data = that.model.workList[that.radioGroup];
      // if (data.state.indexOf("暂停") !== -1 || data.state === "中断") {
      //   uni.$emit("openToast", {
      //     type: "error",
      //     icon: "error",
      //     title: "暂停中不可调整工单顺序!",
      //   });
      //   return;
      // }
      fetch("PUT", "/dms/mobile/reSortWorkOrder", null, {
        deviceCode: data.deviceCode,
        workCode: data.workCode,
        orderCode: data.orderCode,
      }).then((res) => {
        that.$loading.close();
        uni.$emit("openToast", {
          type: "success",
          title: res.msg,
          complete() {
            that.radioGroup = "";
            that.getList(true);
          },
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.device-details {
  height: 100%;
  overflow: auto;
  padding-bottom: 160rpx;

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .main-box {
    flex: 1;
    overflow: auto;
  }
  .home-list {
    height: 100%;
  }

  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }
  .number-davities-box {
    text-align: center;
    .header {
      margin-bottom: 20rpx;
    }
    .item-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
  }
  .btn-box {
    display: flex;
    .btn-box-item {
      padding: 20rpx;
      flex: 1;
      text-align: center;
      border-top: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      color: #67aee7;
    }
  }
}
</style>
